// export default Header;
import React, { useState, useEffect } from "react";
import moment from "moment";

// 静态背景图片
const backgroundImage = [
  require("../images/picture3.jpg"),
  require("../images/beautiful-sea.jpg"),
  require("../images/bz1.jpg"),
  require("../images/bz.jpg"),
  require("../images/New_Zealand1.jpg"),
];

const Header = () => {
  const [quote, setQuote] = useState("");
  const [currentTime, setCurrentTime] = useState("");
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  useEffect(() => {
    const quotes = [
      "星影落九天，鱼雁舞千弦。但为君沉吟，孤鸿醉尘烟。",
      "明月几时有，把酒问青天。",
      "大江东去，浪淘尽，千古风流人物。",
      "云破日出瞳瞳见，风卷残花片片飞。",
    ];

    const loadRandomQuote = () => {
      const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
      setQuote(randomQuote);
    };
    loadRandomQuote();
    const quoteIntervalId = setInterval(loadRandomQuote, 7000);
    return () => clearInterval(quoteIntervalId);
  }, []);

  useEffect(() => {
    const updateTime = () => setCurrentTime(moment().format("HH:mm:ss"));
    updateTime();
    const timeIntervalId = setInterval(updateTime, 1000);
    return () => clearInterval(timeIntervalId);
  }, []);

  // 添加背景图片切换的定时器
  useEffect(() => {
    const cycleImages = () => {
      setCurrentImageIndex(
        (prevIndex) => (prevIndex + 1) % backgroundImage.length
      );
    };
    const imageIntervalId = setInterval(cycleImages, 5000); // 每5秒切换一次
    return () => clearInterval(imageIntervalId);
  }, []);

  return (
    <div
      className="header"
      style={{
        position: "relative",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        background: `url(${backgroundImage[currentImageIndex]}) center/cover no-repeat`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
        transition: "background-image 1s ease-in-out",
        minHeight: "100vh", // 从420px调整为占满一屏高度
        height: "100vh",
        color: "#fff",
        padding: "28px 24px",
        borderRadius: "14px",
        overflow: "hidden",
        boxSizing: "border-box",
      }}
    >
      {/* 左上角 logo 背景图（可替换） */}
      <div
        style={{
          position: "absolute",
          top: 16,
          left: 16,
          width: 112,
          height: 112,
          borderRadius: 20,
          backgroundImage: `url(${require("../images/logo.png")})`,
          backgroundSize: "contain",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          boxShadow: "0 6px 16px rgba(0,0,0,0.25)",
          backdropFilter: "blur(2px)",
          zIndex: 2,
        }}
      />

      {/* 左侧：团队名称与口号 */}
      <div
        style={{
          position: "absolute",
          top: 60,
          left: 140,
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          gap: 20,
          textShadow: "0 2px 6px rgba(0,0,0,0.45)",
          zIndex: 2,
        }}
      >
        <div style={{ fontSize: 128, fontWeight: 900, letterSpacing: 4 }}>
          UCHAIN
        </div>
        <div style={{ fontSize: 36, fontWeight: 700 }}>码力全开 创想未来！</div>
      </div>

      {/* 右侧：时间 日期 与 名言标签 */}
      <div
        style={{
          position: "absolute",
          top: 120,
          right: 24,
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-end",
          gap: 10,
          padding: "10px 12px",
          borderRadius: 12,
          background: "rgba(0,0,0,0.35)",
          boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
          minWidth: 220,
          zIndex: 3, // 最高，确保不被气泡覆盖
        }}
      >
        <div style={{ fontSize: 34, fontWeight: 800 }}>{currentTime}</div>
        <div style={{ fontSize: 16 }}>
          {moment().format("YYYY 年 MM 月 DD 日 dddd")}
        </div>
        <div
          style={{
            marginTop: 6,
            fontSize: 14,
            padding: "6px 10px",
            borderRadius: 8,
            background: "rgba(255,255,255,0.15)",
            border: "1px solid rgba(255,255,255,0.25)",
            maxWidth: 360,
            textAlign: "right",
          }}
        >
          「{quote}」
        </div>
      </div>
    </div>
  );
};

export default Header;
